<template>
	<view class="header">
		<view class="headerNav" @click="showInfo" 
		:style="'padding-top:'+(height*2)+'rpx;background-color:'+bgColor+';'">
			<image src="../../static/imgs/headImg.jpg" class="headImg" @click="showMyCard"
				:style="'display:'+(show ? '':'none')"></image>
			<view class="fx">
				<image v-if="!isShow" src="../../static/icon/向下.png"></image>
				<image v-if="isShow" src="../../static/icon/top.png"></image>
			</view>
		</view>
		<view class="user-info"v-if="isShow">
			
		</view>
	</view>

</template>

<script>
	import store from '../../store'
	export default {
		props: {
			// 背景颜色
			bgcolor: {
				type: String,
				default: "#F8F8F8"
			},
		},
		data() {
			return {
				height: "",
				show: true,
				isShow: false,
				bgColor: this.bgcolor,
			}
		},
		mounted() {
			this.height = store.getters.statusBarHeight
		},
		methods: {
			showMyCard() {
				uni.switchTab({
					url: "../../pages/card/card"
				})
			},
			showInfo() {
				this.isShow = !this.isShow;
			}
		},
	};
</script>

<style lang="less" scoped>
	.header {
		width: 100vw;
	}
	.headImg {
		width: 60rpx;
		height: 60rpx;
		border-radius: 30rpx;
		margin-left: 20rpx;
		margin-bottom: 20rpx;
	}

	.headerNav {
		display: flex;
		align-items: center;
		width: 100%;
	}

	.fx image {
		position: relative;
		width: 60rpx;
		height: 60rpx;
		margin-left: 10rpx;
		margin-bottom: 20rpx;
	}
	
	.user-info {
		position: absolute;
		width: 300rpx;
		height: 300rpx;
		top: 180rpx;
		left: 30rpx;
		background-color: white;
	}
</style>
